<div *ngIf="!profile" class="no-data">
  No data available
</div>
<div *ngIf="profile" class="stats-container">
  <h5 class="stats-header">Common statistics</h5>
  <ol class="stats__list">
    <li class="stats__list-item">
      <div class="stats__list-item-title">Count</div>
      <div class="stats__list-item-separator"></div>
      <div class="stats__list-item-value">
        <div class="status">{{ profile.commonStatistics.count }}</div>
      </div>
    </li>
    <li class="stats__list-item">
      <div class="stats__list-item-title">Distinct&nbsp;count</div>
      <div class="stats__list-item-separator"></div>
      <div class="stats__list-item-value">
        <div class="status">{{ profile.commonStatistics.distinctCount }}</div>
      </div>
    </li>
    <li class="stats__list-item">
      <div class="stats__list-item-title">Unique&nbsp;(%)</div>
      <div class="stats__list-item-separator"></div>
      <div class="stats__list-item-value">
        <div class="status">{{ profile.commonStatistics.uniquePerc }}%</div>
      </div>
    </li>
    <li class="stats__list-item">
      <div class="stats__list-item-title">Missing</div>
      <div class="stats__list-item-separator"></div>
      <div class="stats__list-item-value">
        <div class="status">{{ profile.commonStatistics.missing }}</div>
      </div>
    </li>
    <li class="stats__list-item">
      <div class="stats__list-item-title">Missing&nbsp;(%)</div>
      <div class="stats__list-item-separator"></div>
      <div class="stats__list-item-value">
        <div class="status">{{ profile.commonStatistics.missingPerc }}%</div>
      </div>
    </li>
  </ol>
  <div class="hr"></div>

  <div *ngIf="profile.kind === 'NumericalProfile'">
    <h5 class="stats-header">Quantile statistics</h5>
    <ol class="stats__list">
      <li class="stats__list-item">
        <div class="stats__list-item-title">Min</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.min.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >5th&nbsp;percentile</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.percentile5.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Q1</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.q1.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Median</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.median.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Q3</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.q3.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >95th&nbsp;percentile</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.percentile95.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Range</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.range.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >Interquartile&nbsp;range</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.interquartileRange.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Max</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.quantileStatistics.max.toFixed(3) }}
          </div>
        </div>
      </li>
    </ol>
    <div class="hr"></div>
    <h5 class="stats-header">Descriptive statistics</h5>
    <ol class="stats__list">
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >Standard&nbsp;deviation</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.descriptiveStatistics.standardDeviation.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >Coefficient&nbsp;of&nbsp;variation</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.descriptiveStatistics.variationCoef.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Kurtosis</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.descriptiveStatistics.kurtosis.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Variance</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.descriptiveStatistics.variance.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Mean</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.descriptiveStatistics.mean.toFixed(3) }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Skewness</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.descriptiveStatistics.skewness.toFixed(3) }}
          </div>
        </div>
      </li>
    </ol>
    <div class="hr"></div>
  </div>
  <div *ngIf="profile.kind === 'TextProfile'">
    <h5 class="stats-header">Text statistics</h5>
    <ol class="stats__list">
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >Mean Character Length</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.textStatistics.meanCharacterLength }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >Mean Dep Tree Depth</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.textStatistics.meanDepTreeDepth }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >Mean Sentiment Score</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.textStatistics.meanSentimentScore }}
          </div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title">Mean Token Length</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">{{ profile.textStatistics.meanTokenLength }}</div>
        </div>
      </li>
      <li class="stats__list-item">
        <div class="stats__list-item-title"
          >Mean Unique Lemma Ratio</div
        >
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">
            {{ profile.textStatistics.meanUniqueLemmaRatio }}
          </div>
        </div>
      </li>
    </ol>
    <div class="hr"></div>
    <h5 class="stats-header">PoS Statistics</h5>
    <ol class="stats__list">
      <li
        *ngFor="let item of profile.textStatistics.meanPOSProba | keyvalue"
        class="stats__list-item"
      >
        <div class="stats__list-item-title">
          {{ dictionary[item.key] }}</div>
        <div class="stats__list-item-separator"></div>
        <div class="stats__list-item-value">
          <div class="status">{{ item.value }}</div>
        </div>
      </li>
    </ol>
  </div>
</div>
